<template>
  <div id="barEchars" ref="echarsRef" :style="{ height, width }"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted, defineProps } from "vue";

defineProps({
  className: {
    type: String,
    default: "",
  },
  width: {
    type: String,
    default: "200px",
    required: true,
  },
  height: {
    type: String,
    default: "200px",
    required: true,
  },
});

const echarsRef = ref<HTMLDivElement>();
// 数据
var pieData = [
  {
    name: "淘宝",
    value: 11231,
  },
  {
    name: "京东",
    value: 12673,
  },
  {
    name: "唯品会",
    value: 6123,
  },
  {
    name: "1号店",
    value: 8989,
  },
  {
    name: "聚美优品",
    value: 6700,
  },
];
// 配置
const option = {
  // 数据分类切换
  legend: {
    x: "center",
    y: "bottom",
    data: pieData.map((item) => item.name),
  },
  series: [
    {
      type: "pie",
      data: pieData,
      label: {
        show: true,
        // 文本标签
        formatter: function ({ name, value, percent }) {
          return `${name}: ${value}  ${percent}%`;
        },
      },
      // 圆形半径,
      // radius: "30%",
      // 设置成圆环
      radius: ["10%", "85%"],
      // 设置成南丁格尔图
      roseType: "radius",
      // 鼠标选中的效果: single: 单选; multiple: 多选, 被选中的区域会偏移中心点
      selectedMode: "single",
      // 鼠标选中后距中心点的偏移量
      selectedOffset: 15,
      // itemStyle: {
      //   borderRadius: 10,
      // },
    },
  ],
};

/**
 * 初始化Echarts
 */
const initEcharts = () => {
  const myEchars = echarts.init(echarsRef.value);
  myEchars.setOption(option);
  window.addEventListener("resize", () => {
    myEchars.resize();
  });
};

onMounted(() => {
  initEcharts();
});
</script>

<style lang="scss" scoped></style>
